                                           <!-- 底部导航栏组件 -->

<!-- 传入属性 -->
<!-- bottownList:渲染数组 (img:未选中时展示图标  clickImg:选中时展示图标  title：标题  url：跳转地址)
        示例:[{ img: "", clickImg: "", title: "首页", url: "" }]
		
    defaultIndex:默认选择位置  默认0
    bottownHeight:自定义高度  默认60  单位px
    bottownItemWidth:内部成员集中区域宽度  默认275  单位px
    bottownItemHeight:内部成员集中区域高度  默认80  单位px -->
	
<!-- 传入方法 -->
<!-- bottownNavigation：父组件传递函数 传递位置信息index  跳转地址url -->
    
<template>
  <div class="bottownNavigationBar" :style="{ height: bottownHeight + 'px' }">
    <!-- 内部成员集中区域 -->
    <!-- --------------------------------------------------------------------------------------------------------------- -->
    <div
      class="bottownNavigationBar-show"
      :style="[
        { height: bottownItemHeight + 'px' },
        { width: bottownItemWidth + 'px' },
      ]"
    >
      <!-- 内部成员 -->
      <div
        class="bottownNavigationBar-show-item"
        :class="{ clickChange: index == bottownIndex ? true : false }"
        v-for="(value, index) in bottownList"
        :key="index"
        @click="bottownClick(index, value.url)"
      >
        <!-- 图标（未点击时） -->
        <div
          class="bottownNavigationBar-show-img"
          :style="{ backgroundImage: 'url(' + value.img + ')' }"
          v-show="index != bottownIndex"
        ></div>

        <!-- 图标（点击切换时） -->
        <div
          class="bottownNavigationBar-show-img"
          :style="{ backgroundImage: 'url(' + value.clickImg + ')' }"
          v-show="index == bottownIndex"
        ></div>

        <!-- 标题 -->
        <div class="bottownNavigationBar-show-title">{{ value.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 渲染数组 (img:未选中时展示图标  clickImg:选中时展示图标  title：标题  url：跳转地址)
    bottownList: {
      type: [Array],
      default() {
        return [
          {
            img: "https://oss4.komect.com/equity-home/h5/20211123首页-黑白.png",
            clickImg: "https://oss4.komect.com/equity-home/h5/20211123首页.png",
            title: "首页",
            url: "",
          },
          {
            img: "https://oss4.komect.com/equity-home/h5/20211123分类-黑白.png",
            clickImg: "https://oss4.komect.com/equity-home/h5/20211123分类.png",
            title: "分类",
            url: "",
          },
          {
            img: "https://oss4.komect.com/equity-home/h5/20211123酒杯-黑白.png",
            clickImg: "https://oss4.komect.com/equity-home/h5/20211123酒杯.png",
            title: "直约",
            url: "",
          },
        ];
      },
    },

    // 默认选择位置  默认0
    defaultIndex: {
      type: [String, Number],
      default: 0,
    },

    // 自定义高度  默认60  单位px
    bottownHeight: {
      type: [String, Number],
      default: 60,
    },

    // 内部成员集中区域宽度  默认275  单位px
    bottownItemWidth: {
      type: [String, Number],
      default: 275,
    },

    // 内部成员集中区域高度  默认40  单位px
    bottownItemHeight: {
      type: [String, Number],
      default: 40,
    },
  },
  data() {
    return {
      // 点击位置信息
      bottownIndex: 0,
    };
  },
  created() {
    //   同步默认信息
    this.bottownIndex = this.defaultIndex;
  },
  methods: {
    //   成员点击函数
    bottownClick(index, url) {
      //   同步点击位置信息
      this.bottownIndex = index;
      //   父组件传递函数 传递位置信息index  跳转地址url
      this.$emit("bottownNavigation", { index: index, url: url });
    },
  },
};
</script>

<style scoped>
/* 底部导航栏 */
.bottownNavigationBar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 14px;
}

/* 成员集中区域 */
/* ------------------------------------------------------------------------------------------- */
.bottownNavigationBar-show {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 成员样式 */
/* ===================================================== */
.bottownNavigationBar-show-item {
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
}

/* 图标样式 */
.bottownNavigationBar-show-img {
  height: 24px;
  width: 24px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 点击后切换样式 */
.clickChange {
  color: #30b88f;
}
</style>
